/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2025-08-06 16:10:05
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2025-10-09 16:23:27
 * @FilePath: \project\work-tool\my-dev-project\src\views\login\index.tsx
 * @Description: 
 */
// import React from 'react'
import styles from './login.module.scss'
import { useNavigate } from 'react-router-dom';
import { Button, Form, Input, message, Card } from 'antd';
import { useState, useEffect } from 'react';

export default function Login() {
    const [isRegisterMode, setIsRegisterMode] = useState(false);
    const [form] = Form.useForm();
    const [captcha, setCaptcha] = useState('');
    const [countdown, setCountdown] = useState(0);
    const navigate = useNavigate();

    // 生成随机验证码
    const generateCaptcha = () => {
        const chars = '0123456789';
        let result = '';
        for (let i = 0; i < 6; i++) {
            result += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        setCaptcha(result);
        // 调用开始倒计时函数
        startCountdown();
    };

    // 获取验证码倒计时
    const startCountdown = () => {
        setCountdown(60);
    };

    useEffect(() => {
        // 移除页面加载时自动生成验证码的逻辑
        let timer: NodeJS.Timeout;
        if (countdown > 0) {
            timer = setTimeout(() => {
                setCountdown(countdown - 1);
            }, 1000);
        }
        return () => {
            if (timer) clearTimeout(timer);
        };
    }, [countdown]);

    // 定义登录和注册所需字段的类型
    type FormValues = {
        username: string;
        password: string;
        confirmPassword?: string;
        captcha?: string;
    };
    const handleSubmit = (values: FormValues) => {
        if (isRegisterMode) {
            // 注册逻辑
            if (values.password !== values.confirmPassword) {
                message.error('两次输入的密码不一致');
                return;
            }
            if (values.captcha !== captcha) {
                message.error('验证码不正确');
                return;
            }
            console.log('注册信息:', values);
            message.success('注册成功，请登录');
            setIsRegisterMode(false);
            form.resetFields();
            // 重置验证码相关状态
            setCaptcha('');
            setCountdown(0);
        } else {
            // 登录逻辑
            console.log('登录信息:', values);
            message.success('登录成功');
            // 这里可以添加登录成功后的跳转逻辑
            navigate('/');
        }
    };

    const toggleMode = () => {
        setIsRegisterMode(!isRegisterMode);
        form.resetFields();
        // 移除切换模式时自动生成验证码的逻辑
        // 重置验证码相关状态
        setCaptcha('');
        setCountdown(0);
    };

    return (
        <div className={styles.loginPage}>
            <div className={styles.loginLeft}></div>
            <div className={styles.loginRight}>
                <Card className={styles.loginCard}>
                    <h2 className={styles.loginTitle}>{isRegisterMode ? '用户注册' : '用户登录'}</h2>
                    <Form
                        form={form}
                        name={isRegisterMode ? "register" : "login"}
                        layout="vertical"
                        colon={false}
                        onFinish={handleSubmit}
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[{ required: true, message: '请输入用户名' }]}
                            className={styles.formItem}
                        >
                            <Input placeholder="请输入用户名" className={styles.input} />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '请输入密码' }]}
                            className={styles.formItem}
                        >
                            <Input.Password placeholder="请输入密码" className={styles.input} />
                        </Form.Item>

                        {isRegisterMode && (
                            <>
                                <Form.Item
                                    label="确认密码"
                                    name="confirmPassword"
                                    rules={[{ required: true, message: '请确认密码' }]}
                                    className={styles.formItem}
                                >
                                    <Input.Password placeholder="请再次输入密码" className={styles.input} />
                                </Form.Item>

                                <Form.Item
                                    label="验证码"
                                    name="captcha"
                                    rules={[{ required: true, message: '请输入验证码' }]}
                                    className={styles.formItem}
                                >
                                    <div className={styles.captchaContainer}>
                                        <Input placeholder="请输入验证码" className={styles.input} />
                                        <Button
                                            type="default"
                                            className={styles.captchaButton}
                                            onClick={generateCaptcha}
                                            disabled={countdown > 0}
                                        >
                                            {countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码'}
                                        </Button>
                                    </div>
                                    <div
                                        className={styles.captchaImage}
                                        onClick={countdown <= 0 ? generateCaptcha : undefined}
                                        style={{
                                            cursor: countdown > 0 ? 'not-allowed' : 'pointer',
                                            opacity: captcha ? 1 : 0.5
                                        }}
                                    >
                                        {captcha || '点击获取验证码'}
                                    </div>
                                </Form.Item>
                            </>
                        )}

                        <Form.Item className={styles.formItem}>
                            <Button type="primary" htmlType="submit" block className={styles.submitButton}>
                                {isRegisterMode ? '注册' : '登录'}
                            </Button>
                        </Form.Item>

                        <Form.Item className={styles.formItem}>
                            <Button type="link" onClick={toggleMode} className={styles.toggleButton}>
                                {isRegisterMode ? '已有账号，去登录' : '没有账号，去注册'}
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        </div>
    )
}
